<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<style>
    .item1,
    .item2,
    .item3,
    .item4 {
        padding: 0 0.8rem;
        background-color: #fff;
    }

    .item1 .item_detail:last-child,
    .item2 .item_detail:last-child,
    .item3 .item_detail:last-child,
    .item4 .item_detail:last-child {
        border-bottom: none;
    }

    .item3 .item_detail:last-child span {
        color: #2780e8;
    }

    .item1 .yaofang_fahuo_info {
        height: 3.5rem;
        line-height: 3.5rem;
        border-bottom: 1px solid #e8e8e8;
        color: #565656;
        font-size: 0.7rem;
    }

    .item1 .yaofang_fahuo_info span {
        float: right;
        display: inline-block;
        width: 4rem;
        height: 1.5rem;
        text-align: center;
        line-height: 1.5rem;
        border-radius: 0.75rem;
        color: #fff;
        font-size: 0.6rem;
        background-color: #2780e8;
        margin-top: 1rem;
    }

    .item_detail {
        height: 2.2rem;
        line-height: 2.2rem;
        font-size: 0.7rem;
        color: #565656;
        border-bottom: 1px solid #e8e8e8;
    }

    .item_detail:active {
        background-color: #e8e8e8;
    }

    .item_detail span {
        font-size: 0.6rem;
        float: right;
    }

    .item2 .address_div {
        padding: 0.8rem 0;
        color: #838383;
        font-size: 0.6rem;
        border-bottom: 1px solid #e8e8e8;
    }

    .item4_top {
        height: 2.5rem;
        line-height: 2.5rem;
        color: #565656;
        font-size: 0.7rem;
    }

    .item4_top span {
        float: right;
        color: #2780e8;
        font-size: 0.6rem;
    }

    .item4_top span img {
        width: 0.4rem;
        height: 0.8rem;
        margin-left: 0.5rem;
    }

    .fangan_detail {
        width: 100%;
        background-color: #FFF4F3;
    }

    .fangan_detail .yaocai_item {
        width: 33.3%;
        display: inline-block;
        margin-left: -0.25rem;
        text-align: center;
        height: 2.5rem;
        line-height: 2.5rem;
        color: #565656;
        font-size: 0.7rem;
    }
</style>

<body>
    <div  id="app" v-cloak>
        <div class="placeholder_div"></div>

        <div class="item1">
            <div class="yaofang_fahuo_info openwin" data-win="wuliu_detail_win" :data-id="order_detail.deliveryNo">
                药房发货信息
                <span>查看物流</span>
            </div>
            <div class="item_detail">
                药房
                <span>{{order_detail.storeName}}</span>
            </div>
            <div class="item_detail">
                类型
                <span>中药饮片</span>
            </div>
        </div>

        <div class="placeholder_div"></div>
        <div class="item2">
            <div class="item_detail">
                患者
            </div>
            <div class="item_detail">
                姓名
                <span>{{order_detail.userName}}</span>
            </div>
            <div class="item_detail">
                电话
                <span>{{order_detail.userPhone}}</span>
            </div>
        </div>
        <div class="placeholder_div"></div>
        <div class="item2">
            <div class="item_detail">
                收货信息
            </div>

            <div class="address_div">
                <p class="name">{{order_detail.addressConsignee}} {{order_detail.addressPhone}}</p>
                <p class="address">{{order_detail.addressDetail}}</p>
            </div>

            <div class="item_detail">
                下单时间
                <span>{{order_detail.payTime}}</span>
            </div>

            <div class="item_detail">
                订单编号
                <span>{{order_detail.orderSn}}</span>
            </div>
        </div>

        <div class="placeholder_div"></div>

        <div class="item3">
            <div class="item_detail">
                诊金
                <span>￥{{order_detail.billingMoney}}</span>
            </div>
            <div class="item_detail">
                单贴药费
                <span>￥{{order_detail.drugMoney}}</span>
            </div>
            <div class="item_detail">
                服务费
                <span>￥{{order_detail.serviceMoney}}</span>
            </div>
            <div class="item_detail">
                总药费
                <span>￥{{totalDrugsMoney}}</span>
            </div>
            <!-- <div class="item_detail">
                总服务费
                <span>￥{{totalServiceMoney}}</span>
            </div> -->
            <div class="item_detail" v-if="(order_detail.dosageForm != 'zyyp') && order_detail.dosageForm">
                加工费
                <span>￥{{order_detail.processCost}}</span>
            </div>
            <div class="item_detail" v-if="(order_detail.dosageForm == 'zyyp') && order_detail.dosageForm">
                代煎费
                <span>￥{{order_detail.decoctingFee}}</span>
            </div>
            <div class="item_detail">
                运费
                <span>￥{{order_detail.logisticsFee}}</span>
            </div>
            <div class="item_detail">
                总金额<span>{{order_detail.totalMoney}}(不含运费)</span>
                <!-- <span v-if="(order_detail.dosageForm != 'zyyp')">
                  诊金￥{{order_detail.billingMoney}} + 药费￥{{order_detail.drugMoney}} x {{order_detail.quantity}}
                  + 服务费￥{{order_detail.serviceMoney}} + 加工费￥{{order_detail.processCost}}
                  = 总价{{order_detail.totalMoney}}
                </span>
                <span v-if="(order_detail.dosageForm == 'zyyp')">
                  诊金￥{{order_detail.billingMoney}} + 药费￥{{order_detail.drugMoney}} x {{order_detail.quantity}}
                  + 服务费￥{{order_detail.serviceMoney}} + 代煎费￥{{order_detail.decoctingFee}}
                  = 总价{{order_detail.totalMoney}}
                </span> -->
            </div>
            <div class="item_detail" v-if="order_detail.logisticsFee">
                应付金额
                <span>总金额￥{{order_detail.totalMoney}} + 运费￥{{order_detail.logisticsFee}} = ￥{{order_detail.payAmount}}</span>
            </div>
            <div class="item_detail" v-else>
                应付金额
                <span>￥{{order_detail.payAmount}}(包邮)</span>
            </div>
            <div class="item_detail">
              {{needPoint}}积分抵扣￥{{decAmount}}
            </div>
            <div class="item_detail">
                实付金额
                <span>应付￥{{order_detail.payAmount}} - 抵扣￥{{decAmount}} = ￥{{actualPayAmount}}</span>
            </div>
        </div>

        <div class="placeholder_div"></div>

        <div class="item4">
            <div class="item4_top">
                方案详情
            </div>
        </div>
        <div class="fangan_detail">
            <div class="yaocai_item" v-for="item in order_detail.orderItemVos">
                {{item.name}} {{item.quantity}}{{item.unit}}
            </div>
        </div>

        <div class="item4">
            <div class="item_detail">
                购买帖数
                <span>{{order_detail.quantity}}帖</span>
            </div>
        </div>

    </div>
</body>

</html>
<script src="../script/set_root.js"></script>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/hb.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript">
    apiready = function () {
        hb_ready();
        getData()
    }
    //使用vue对数据进行绑定
    var app = new Vue({
        el: '#app',
        data: {
            order_detail: "", // 订单数据
            actualPayAmount:0,
            userPoint: 0,
            decAmount: 0,
            totalServiceMoney: 0,
            needPoint: 0,
            totalDrugsMoney:0.000
        },
        methods: {

        },

    })

    function getData() {
        get_ajax("order/findOrderDetailByDoctorId", {
            doctorId: api.pageParam.doctorId,
            orderId: api.pageParam.orderId
        }, function (res, err) {
            //alert(JSON.stringify(res))
            if (res.code == 200) {
                app.order_detail = res.data
                app.order_detail.payAmount = $api.toThreeDecimal(Number(res.data.totalMoney) + Number(res.data.logisticsFee))
                app.totalServiceMoney = $api.toThreeDecimal(Number(res.data.quantity) * Number(res.data.serviceMoney))
                app.totalDrugsMoney = $api.toThreeDecimal(Number(res.data.quantity) * Number(res.data.drugMoney))
                //积分抵扣
                get_ajax("order/point-calculation",{
                  userId:res.data.userId,
                  price: app.order_detail.payAmount
                },function(rst,err){
                  if(rst.code == 200 && rst.data){
                    app.actualPayAmount = $api.toThreeDecimal(Number(app.order_detail.payAmount) - Number(rst.data.deductionAmount))
                    app.actualPayAmount = app.actualPayAmount < 0 ? 0 : app.actualPayAmount
                    app.userPoint = rst.data.userPoint
                    app.decAmount = rst.data.deductionAmount
                    app.needPoint = rst.data.needPoint
                  }
                });
            }
        })
    }
</script>
